为什么要导入外部模型?
- 在上一节中,我们了解到,使用THREE.js创建常见几何图形十分方便。
- 但对于人或动物这样的复杂模型使用简单几何体的组合就非常麻烦。
支持格式
Three.js有一系列导入外部文件的辅助函数,是在three.js之外的,使用前需要下载,在https://github.com/mrdoob/three.js/tree/master/examples/js/loaders可以找到。
目前,支持的模型格式有:
- *.obj(需导入OBJLoader.js)
- *.obj, *.mtl(导入MTLLoader.js 与 OBJMTLLoader.js)
- *.dae
- *.ctm
- *.ply
- *.stl
- *.wrl
- *.vtk
无材质的模型
需导入OBJLoader.js。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19
| var loader = new THREE.OBJLoader();
loader.load('../lib/***.obj', function(obj){ mesh = obj; scene.add(obj); });
loader.load('../lib/***.obj', function(obj){ obj.traverse(function(child){ if(child instanceof THREE.Mesh){ child.material.side = THREE.DoubleSide; } }); mesh = obj; scene.add(obj); });
|
有材质的模型
- 在代码中导入模型后设置材质
1 2 3 4 5 6 7 8 9 10 11 12
| loader.load('../lib/***.obj', function(obj){ obj.traverse(function(child){ if(child instanceof THREE.Mesh){ child.material = new THREE.MeshLambertMaterial({ color: 0xffff00, side: THREE.DoubleSide }); } }); mesh = obj; scene.add(obj); });
|
在建模软件中导出材质信息
需导入MTLLoader.js 与 OBJMTLLoader.js。
1 2 3 4 5 6 7 8 9 10 11 12
| var loader = new THREE.OBJMTLLoader();
loader.addEventListener('load', function(event){ var obj = event.content; mesh = obj; scene.add(obj); });
loader.load('../lib/***.obj', '../lib/***.mtl');
|
补充:在r78版本中,删除了OBJMTLLoader.js库,使用OBJLoader.js和MTLLoader.js一起使用来代替它
1 2 3 4 5 6 7 8 9 10 11 12
| var mtlLoader = new THREE.MTLLoader();
mtlLoader.load('*.mtl', function(materials) { materials.preload(); //预加载 var objLoader = new THREE.OBJLoader(); objLoader.setMaterials(materials); objLoader.load('*.obj', function(object) { object.position.y = -300; // 这里调整模型位置 mesh = object; // 赋值给全局变量 scene.add(object); }); });
|